<script>
import { defineComponent } from 'vue';
import SupermapCard from "@/components/SupermapCard/index.vue";
import Api from '@/Api'

export default defineComponent({
  name: "Section-2",
  components: {
    SupermapCard
  },
  setup() {
  },
  data() {
    return {
      total: 0,
      title: '管线统计分析总数'
    }
  },
  mounted() {
    this.getData();
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    // 获取数据
    async getData() {
      const res = await Api.getLenOfPipline();
      if (res.code !== 200) { return }
      if (!res.data.Length) { return }
      this.initChart({
        data: res.data.Length,
        unit: res.data.Unit
      });
    },
    // 初始化图表
    initChart({ data, unit }) {
      const dom = document.getElementById("echart-section-2");
      if (!dom) { return }
      const chartIns = echarts.init(dom);
      let total = 0;
      Object.keys(data).forEach(v => {
        data[v] = data[v].toFixed(2)
        total = total + Number(data[v])
      });
      this.total = total.toFixed(2);
      const data_ = [
        { "value": data.WS || 0, "name": "污水", "itemStyle": { "color": "#ff0000" } },
        { "value": data.YS || 0, "name": "雨水", "itemStyle": { "color": "#ff0000" } },
        { "value": data.BM || 0, "name": "不明管线", "itemStyle": { "color": "#000000" } },
        { "value": data.DS || 0, "name": "有线电视", "itemStyle": { "color": "#000000" } },
        { "value": data.DX || 0, "name": "电信管线", "itemStyle": { "color": "#000000" } },
        { "value": data.EX || 0, "name": "电力通信", "itemStyle": { "color": "#000000" } },
        { "value": data.GB || 0, "name": "广播", "itemStyle": { "color": "#000000" } },
        { "value": data.GD || 0, "name": "供电", "itemStyle": { "color": "#000000" } },
        { "value": data.JK || 0, "name": "监控信号", "itemStyle": { "color": "#000000" } },
        { "value": data.JS || 0, "name": "给水", "itemStyle": { "color": "#000000" } },
        { "value": data.JY || 0, "name": "军用", "itemStyle": { "color": "#000000" } },
        { "value": data.LC || 0, "name": "陆地长输", "itemStyle": { "color": "#000000" } },
        { "value": data.LD || 0, "name": "路灯", "itemStyle": { "color": "#000000" } },
        { "value": data.LT || 0, "name": "联通管线", "itemStyle": { "color": "#000000" } },
        { "value": data.MQ || 0, "name": "煤气", "itemStyle": { "color": "#000000" } },
        { "value": data.PB || 0, "name": "公共自行车", "itemStyle": { "color": "#000000" } },
        { "value": data.RS || 0, "name": "热水", "itemStyle": { "color": "#000000" } },
        { "value": data.SY || 0, "name": "石油", "itemStyle": { "color": "#000000" } },
        { "value": data.TR || 0, "name": "天然气", "itemStyle": { "color": "#000000" } },
        { "value": data.XH || 0, "name": "交通信号", "itemStyle": { "color": "#000000" } },
        { "value": data.YD || 0, "name": "移动管线", "itemStyle": { "color": "#000000" } },
        { "value": data.ZH || 0, "name": "综合管沟", "itemStyle": { "color": "#000000" } },
        { "value": data.ZQ || 0, "name": "蒸汽", "itemStyle": { "color": "#000000" } },
        { "value": data.ZS || 0, "name": "中水", "itemStyle": { "color": "#000000" } }]
      const getArrByKey = (data, k) => {
        let key = k || 'value';
        let res = [];
        if (data) {
          data.forEach(function (t) {
            res.push(t[key]);
          });
        }
        return res;
      };
      const option = {
        grid: {
          top: '0',
          left: '5%',
          right: '5%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: getArrByKey(data_, 'name'),
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              inside: false,
              color: '#606266',
              margin: 0,
              padding: [0, 10, 0, 0],
              align: 'right',
              verticalAlign: 'center',
              formatter: function (value, index) {
                return '{title|' + value + '}';
              },
              rich: {
                title: {
                  width: 50,
                  fontSize: 14,
                },
              },
            },
          },
          {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: getArrByKey(data_, 'name'),
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              margin: 0,
              interval: 0,
              inside: false,
              padding: [0, -100, 0, 0],
              color: '#4CB1A0',
              fontSize: 14,
              align: 'right',
              verticalAlign: 'center',
              formatter: function (value, index) {
                return data_[index].value + ' ' + unit;
              },
            },
          }
        ],
        series: [
          {
            type: 'bar',
            showBackground: true,
            barMinWidth: '10',
            backgroundStyle: {
              opacity: 0.3,
              color: '#4D88FE',
            },
            yAxisIndex: 0,
            data: data_,
            barWidth: 10
          },
        ],
      };

      if (option && typeof option === 'object') {
        chartIns.setOption(option);
      }
    },
    emitFunc() {
      this.getData();
    }
  }
});
</script>
<template>
  <div class="section section-two">
    <supermap-card @emitFunc="emitFunc" :title="title" :width="350" :top="70" :right="20" :height="36" :bottom="20"
      :shouldDrag="true">
      <div class="main-title">
        <div class="inner">
          总长度
          <span class="weight">{{ total }}</span>
          米
        </div>
      </div>
      <div id="echart-section-2"></div>
    </supermap-card>
  </div>
</template>
<style scoped lang="less">
.section-two {
  position: absolute;
  top: 35rem;
  left: 1rem;
  width: 43rem;
}
.main-title {
  height: 5rem;
  background-color: rgba(224, 233, 246, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  & > .inner {
    padding: 0 4rem;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    color: #666;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 0 center, right 0 center;
    background-image: url(@/assets/images/time-slider/icon-arrow-left.png),
      url(@/assets/images/time-slider/icon-arrow-right.png);
  }
}
.weight {
  font-weight: bold;
  color: #000;
  padding: 0 5px;
}

#echart-section-2 {
  height: 63rem;
  background-color: rgba(224, 233, 246, .8);
}
</style>